<template>
  <div class="curmb">
    <el-breadcrumb separator-icon="ArrowRight">
      <template v-for="item in breadcrumbs" :key="item.name">
        <el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { pathMapToBreadCrumbs } from '@/utils'
import useLoginStore from '@/store/login'

defineOptions({
  // 组件名称
  name: 'HeaderCrumb',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const route = useRoute()
const userMenus = useLoginStore().userMenus

const breadcrumbs = computed(() => pathMapToBreadCrumbs(route.path, userMenus))
</script>

<style scoped lang="scss"></style>
